import React, { Fragment, useEffect, useState } from 'react'
import { Button, Space, Table, Modal, Row } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { connect } from 'umi'
import { delAdsItem, getAdsDetail } from '@/api/ads'
import MyCard from '@/components/MyCard'
import { IObjs } from './MyModal'

type Props = {
    list: Array<any>,
    init: Function
}
interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
}

function MyTable({ list, init }: Props) {
    const [visible, setVisible] = useState(false)
    const [editVisible, setEditVisible] = useState(false);
    const [id, setId] = useState("")
    const [adsList, setList] = useState<any>([])

    const showModal = (id: string) => {
        setId(id)
        setVisible(true);
    };

    const hideModal = async () => {
        await delAdsItem(id)
        await init()
        setVisible(false);
    };

    const cancel = () => {
        setVisible(false);
    }


    // 显示编辑弹框
    const showEditModal = async (id: string) => {
        setEditVisible(true)
        const list = await getAdsDetail(id)
        setList(list.data.items)
    };


    const columns: ColumnsType<DataType> = [
        {
            title: '广告位名称',
            dataIndex: 'name',
            key: 'name',
            align: "center",
            render: text => <a>{text}</a>
        },
        {
            title: '操作',
            key: 'action',
            align: "center",
            render: (_, record) => (
                <Space size="middle">
                    <Button onClick={() => {
                        showEditModal(record.key)
                    }} type="primary">编辑</Button>
                    <Button onClick={() => {
                        showModal(record.key)
                    }} type="primary" danger>删除</Button>
                </Space>
            )
        }
    ]
    useEffect(() => {
        init()
    }, [])

    const acceptList = (index: number) => {
        let newList = JSON.parse(JSON.stringify(adsList))
        newList.splice(index, 1)
        setList(newList)
    }

     // 接收子组件内容
     const accept = (obj: IObjs) => {
        const newList = adsList
        newList[obj.index].url = obj.val
        newList[obj.index].img = obj.imageUrl
        setList(newList)
    }
    return (
        <Fragment>
            <Table bordered columns={columns} dataSource={list} />
            {/* 删除 */}
            <Modal
                title="Modal"
                visible={visible}
                onOk={hideModal}
                onCancel={cancel}
                okText="确认"
                cancelText="取消"
            >
            </Modal>
            {/* 编辑 */}
            <Modal
                title="编辑"
                visible={editVisible}
                onOk={() => setEditVisible(false)}
                onCancel={() => setEditVisible(false)}
                width={1000}
            >
                <Row gutter={20} className='mt15'>
                    {
                        
                        adsList.map((item: any, index: number) => {
                            return <MyCard  acceptList = { acceptList }
                                            acceptItem = { accept }
                                            isEdit = {true}
                                            info = { item }
                                            index = { index } 
                                            key = { item._id } />
                        })
                    }
                </Row>
                
            </Modal>
        </Fragment>
    )
}

interface IState {
    ads: {
        list: Array<any>
    }
}

const mapStateToProps = (state: IState) => {
    const { ads } = state
    const { list } = ads
    return {
        list
    }
}

const mapDispatchToProps = (dispatch: Function) => {
    return {
        init() {
            dispatch({ type: "ads/init" })
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(MyTable)